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INTRODUCTION 



UX DESIGN 101 


TODAY’S OBJECTIVES 


► Explain User Experience & Design Thinking 

► A taste of UX: User Interview techniques 

► A 10,000 ft view on how designers design 

► What UX designers do, and a career in UX 
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2000 - 12 


2012 - 15 2016 - Now 




IBM Amazon GA Pure 


r 



UXD Immersive - 3 mth @ Hong Kong 
UXD Accelerator - 1 wk @ Sydney, Au 
UXD Bootcamp -Id @ San Fran 
UXD Bootcamp - 1 d @ San Jose (upcoming) 


^ ' 
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Why are you here? 



UX DESIGN 101 
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UX & DESIGN THINKING 
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What is UX? 
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“User experience 
encompasses all aspects of 
the end-user’s interaction 
with the company, its 
services, and its products: 





DONALD NORMAN 
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WHAT MOST PEOPLE THINK UX IS 


Interface design 
Visual design 


Image Source 
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WHAT UX REALLY IS 

Field research 

Face to face interviewing 

Creation and administering of tests 

Gathering, organizing, and presenting statistics 

Documentation of personas and findings 

Product design 

Feature writing 

Requirement writing 

Graphic arts 

Interaction design 

Information architecture 

Usability 



Prototyping 
Interface layout 
Interface design 
Visual design 
Taxonomy creation 
Terminology creation 
Copy writing 

Presentation and speaking 
Working tightly with programmers 
Brainstorm coordination 
Company culture evangelism 
Communication to stakeholders 





CA . 
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WHAT IS ESIGh 


Source: The wav to design 



Which airline is more design-led? 



...the real design genius in the industry is Southwest Airlines’ co- 
founder and former CEO Herb Kelleher, who “completely 
rethought the paradigm of how you get on an airplane .” 

Diego Rodriguez, Global Managing Director @IDEO 


Source: The wav to design 
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VXD is not just about making things pretty . . . 
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DESIGN TO SHAPE BEHAVIOR 
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“UX Design is about understanding people, and leveraging 
this knowledge to design artifacts that shape perception, 
influence behavior and, ultimately, solve problems ” 


-Steven Ma, Sr. UX Designer, Pure Storage 


UX & DESIGN THINKING 
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Why is UXD important? 
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Successful brands tend to have good UX 
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Watch the Design film (>) 
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VXD impacts people’s life 
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Linkedln, WHY? 

Published on February 27, 2017 



Christine Stevens Follow 

Senior Consultant, Writer, Cat Herder 


1st 

ranked 


Vote 



Dear Lirthadixtj 


Give me bach the old Interface 
The new one does not help me at all . 


Regards, 
Llnhcdln user . 
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The new yahoo finance really suck 


"The interactive chart is not in proportion size as the old yahoo chat format. Can't 
see the date below, chat and line is too small to view. Should have all the relevant 
company profile, income statement, balance sheet, financial holders besides not 
at bottom of the chart. 


Also, when adding indicator, I cann I 


c Wm 


II down to see the last option of this 



Hipster 

0 Hipster Trader 


• Follow 


On a side note, wish Yahoo! Finance was 
publicly traded and I could short that. Amazes 
me how badly they ruined it 

r*™ i6 sna xatm** 

9.00 PM - 12 Mm 2017 
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Good VXD drives conversion 
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of the five million people who 
visited a Typeform over those 
31 days actually completed the 
entire form and submitted it. 


For comparison’s sake, another popular form app reports 
conversion rates ranging from 3% to 28%. 

Source: Zapier blog 


UX & DESIGN THINKING 


The Design Thinking process 
first defines the problem and then 
implements the solutions, always 
with the needs of the user 
demographic at the core of 
concept development. 



LXP'.O 


Image Source: The Evolution of UI/UX Designers Into Product Designers 
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THE UXD PROCESS 



divergent convergent divergent convergent 

gather narrow explore define 

data scope possibilites constraints 


MAKING THE 
THING RIGHT 



ninirir 







THE UX DESIGN PROCESS 
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INTRO TO USER RESEARCH 




INTRO TO USER RESEARCH 
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IT ALL BEGINS WITH RESEARCH 



divergent 

gather 

data 


MAKING THE 
THING RIGHT 


INTRO TO USER RESEARCH 



Why User Research ? 
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WHY PRODUCTS FAIL? 

“One over-riding factor emerges as key to failure: the 
product was either solving the wrong problem, or more 
accurately, it was attempting to solve a problem that 
nobody had.” 


- Pizza for dessert, why most products fail 


33 


INTRO TO USER RESEARCH 


SUCCESSFUL PRODUCTS SOLVE PROBLEMS 


Dave Collum _ _ , 

A* Fdlov* 

O David BColium 

Jusl saw on Amazon an Oral B electric 
toothbrush 'with Bluetooth connectivity." I am 
not keeping up with this Thomas Friedman 
word... 

r iiiiin 

6:07 AM-* May 2017 


"Really? Not only do I not need to have my brushing 
history tracked, I sure don't want an app reporting my 
usage to who knows who." 

"Cleans great, who needs the bluetooth though?" 


"I agree with another reviewer, I really 
don't think the Bluetooth capability is 
necessary at all I used it ONCE " 


"Bluetooth I can't find any logical reason for. 
Like seriously, this is a toothbrush." 


"Bluetooth and the phone apps are unnecessary in my opinion." 



Source: @davidcollum 


Source: amazon reviews 
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USER INTERVIEWS 1 0 1 



A Landscape of User Research Methods 


BEHAVIORAL 


#/■ bye tracking 


# Clickstream Analysis 
£ A'B Testing 


■ Usability Benchmarking (in lab) 

■ Usability Lab Studies ■ Moderated Remote Usability Studies 

■ Unmoderated Remote Panel Studies ■ LJn moderated IJX Studies 

9 Ethnographic Field Studies # True Intent Studies 


ATTITUDINALj 


+ Participatory Design 
Focus Grou ps 
"A Interviews 


QUALITATIVE (DIRECT) 


+ * Concept Testing ► 

# Diary/Camera Studies 

# Customer Feedback 

# * — Desirability Studies — * 

A < Card Sorting ► 


# Intercept Surveys 
A Email Surveys 

QUANTITATIVE (INDIRECT) 


KEY FOR CONTEXT OF PRODUCT USE DURING DATA COLLECTION 

# Natural use of product A De-contextualized / not using product 

■ Scripted (often lab-based) use of product + Combination / hybrid 


CO 7014 

Orr.!i;t~ Fkihntr 
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3 EASY-STEPS 

1. Prepare topics and questions 

2. Conduct interviews 

3. Analyze results 



USER INTERVIEWS 101 
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PREPARING QUESTIONS 


► Carefully write unbiased questions 

► Use your questions as a discussion guide, not a script 

► Get your questions reviewed by another researcher or your PM 


USER INTERVIEWS 101 


CONDUCT INTERVIEWS 


Do’s 

► Ask open-ended questions 

► Ask Whv’s to gain insights 

► Ask follow-up questions 

► Listen, like your life depends on it 

► Find a note taker to help out 
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Don’ts 

► Avoid leading questions 

► Avoid pushing for something specific 

► Avoid compound questions 

► Avoid asking about intention (ask 
about actual behavior) 


USER RESEARCH 

PRACTICE 

INTERVIEWING 









ACTIVITY 





■ 

iXERCISI 

E 





OBJECTIVE(S) 

Get a taste of practicing user interviews 

DO NOW 

2 min Spend 3 minutes to prepare your research topic 
maps and questions 

5 min Pair up with your neighbor. Take turn to 
interview each other (6 min each) 


5 min 


Switch roles and repeat. 


USER RESEARCH 

DEBRIEF 



USER RESEARCH 



OUTPUTS OF RESEARCH 



SYNTHESIZING RESEARCH DATA 



Discover 


Define 



W 



Develop 


Deliver 




Age 

28 

Job 

Bank Client Manager 

Education 

Bachelor of Economics, 
University of Toronto 

1 oration 

Hong Kong 

l-amily 

Single 

Device: 

Nexus 5 


Amanda Mir 



Life is more than just making money and climbing the corporate ladder. 

Seize the moments because you only die once! 


Amanda's Story 


Her Essential Apps 


Amanda works in one of rhe largest banks in the city. 
She's good at her job anc she likes ter job • just not in 
love with it. Since graduation she's travelled to 1 2 
different countries and she is constantly on the look out 
for last minute travel deals to add that next notch to her 
tiavel bell. Friends wf»o know her would tell you that 
Amanda works to fund her travel, ard the/re often 
inspired by her adventure spirit and go-getter attitude. 



Goals 


Frustrations 


General: To live life to the fullest, and to make a positive 
impact to families, friends, and strangers. 

Longer term - To settle down and have her own kids 
some day. 

Shorter term * To take advantage of her savings, her 
freedom, and live life with no regre:s. 


Tneres never enough vacat on t me. 
Real travel deals are hard to find. 

Want to have unique travel experiences 
but they're hard to come by. 

Hate to pack for travel. 

Luggages can be soooo heavy! 


Source: www.stevenmadesigns.com 





AFFINITY DIAGRAM 
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Source: http://www.geneauveung.com/ 


GENERATE USE CASES / USER STORIES 



“As a busy mom , Yd like to let my kids get 
their allowances directly from any ATMs 
so that I have one less thing to do” 


UX DESIGN 101 





DESIGNING... 
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How UX designers go about designing . . . 



DESIGNING... 
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STUDY HUMAN PSYCHDLDGY 

1 . People Don't Want to Work or Think More Than They Have To 

2 . People Have Limitations 7. People Crave Information 

3 . People Make Mistakes 8. Unconscious Processing 

4. Human Memory Is Complicated 9. People Create Mental Models 

5 . People are Social 1 0 . Visual System 

6 . Attention 


Source: uxmag.com 


DESIGNING... 
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APPLY WHAT WE LEARNED ABOUT OUR USERS 



Source: uxplanet.org 


DESIGNING... 
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FOLLOW AND APPLY HEURISTICS 


1. Visibility of system status 

2. Match between system and the 
real world 

3. User control and freedom 

4. Consistency and standards 

5. Error prevention 


6. Recognition rather than recall 

7. Flexibility and efficiency of use 

8. Aesthetic and minimalist design 

9. Help users recognize, diagnose, 
and recover from errors 

10. Help and documentation 


Source: nngroup.com 


DESIGNING- 

THINK IN LAYERS 
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Surface 

Visual Design 

Skeleton 

Interface and Navigation Destyi 
Information Design 

Structure 

Inf ormation Arch lecture 

UX Design 

Scope 

Content Requirement* 

Feature Requirements 

Strategy 

Business Objectives 

User NccOs 


Image source: Intro to Digital Product Design 


DESIGNING... 


STRUCTURE CONTENTS 


Choreograph task flow to help users 

i) complete tasks, 

ii) find what they need, and 

iii) understand what they’ve found.” 
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Image source: grivina.com 
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APPLY DESIGN PRINCIPLES 



Contrast 


Repetition 
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Alignment 


Proximity 


Source: The Non-Designers Design Book 















An image will appear next. 

Pay attention to the order which you follow to scan the page elements 


Lincoln's Thoughts 
on Business. 



You know him as the President who saved the Union. You know hint as the President 
who ended slavery. But do you know what one of our greatest Presidents thought 
about business? Then as now the economy loomed large in the eyes of the voters. 
Come see a presentation hy |ane Bobcat. 


Tuesday, January 8, 2007 
6 p.m. in Copeland 104 


Sponsored by the Association of Information Technology Professionals 
Molding the IS Professionalsof Tomorrow 
C Joe Bobcat 


Lincoln's Thoughts 
on Business. 



You know him as the President who saved the Union. You know him as the President 
who ended slavery. But do you know what one of our greatest Presidents thought 
about business? Then as now the economy loomed large in the eyes of the voters. 
Come see a presentation by Jane Bobcat. 

Tuesday, January 8, 2007 
6 p.m. in Copeland 104 


Sponsored by the Association of Information Technology Professionals 
Molding the IS Professionals of Tomorrow 
Otoe Bobcat 


A 

on BuWiess. 


W 


Source: Designing Business Information 
Systems: Adds, Websites, and More 


Visual weight in action. 

Note how your eye travels around 
this flyer in the numbered 
sequence depicted. 
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Hide 




Displace 



Source: Simple and Usable 
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FIRE TV STICK WITH ALEXA VOICE REMOTE 


DESIGNING... 


INCITE EMOTIONS 
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OPTIMISM s.'.'.'Jh' 
FRIENDLY && 
EXCITEMENT bou,] 

CREATIVE wise £ 

TRUST STRENGTH A&M 
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CONFIDENCE 
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Source: The Psychology of Colors in Marketing and Branding 







DESIGNING... 


SPEAKING OF EMOTIONS... 



Payment failed 




Payment succeeded 
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DELIGHT 


e Harmony' 



Uh oh, that page 
couldn't be found. 

But you're looking for love in all the right places 
let's find someone right for you. 


JOIN NOW 



Already a member? Login 


Source:eharmony 
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SKETCH & WIREFRAME 
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Source: designsbytes.com 




Source: jmparada.com 
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A DAY IN THE LIFE OF 
A UX DESIGNER 







A DAY IN THE LIFE OF A UX DESIGNER 


► Perform research to clarify requirements 

► White-boarding with developers 

► Wireframe workflow 

► Mid- to high- level mockup + prototyping 

► Presenting / defending design 

► User-testing 


Additional reading: Hot job: UX designer 
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A DAY IN THE LIFE OF A UX DESIGNER 


► Perform research to clarify requirements 

► White-boarding with developers 

► Wireframe workflow 

► Mid- to high- level mockup + prototyping 

► Presenting / defending design 

► User-testing 



Image Source: smashingmagazine.com 


A DAY IN THE LIFE OF A UX DESIGNER 


► Perform research to clarify requirements 

► White-boarding with developers 

► Wireframe workflow 

► Mid- to high- level mockup + prototyping 

► Presenting / defending design 

► User-testing 



Image Source: hunterux.com 




A DAY IN THE LIFE OF A UX DESIGNER 


► Perform research to clarify requirements 

► White-boarding with developers 

► Wireframe workflow 

► Mid- to high- level mockup + prototyping 

► Presenting / defending design 

► User-testing 



Image Source: lynda.com 



A DAY IN THE LIFE OF A UX DESIGNER 


► Perform research to clarify requirements 

► White-boarding with developers 

► Wireframe workflow 

► Mid- to high- level mockup + prototyping 

► Presenting / defending design 

► User-testing 



Image Source: usertesting.com 


A DAY IN THE UFE OF A UX DESIGNER @QUMUL0 



HOW IT’S HADE: UX SAUSAGES 

UX AT QUMULO 

► User Research 

► Software 

t Unboxing 

► Installation 

► Hardware and Lighting 

► Marketing (small projects) 

► General visual design, hardware 
diagrams, and illustration support 
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Source: hcde.washington.edu 




UX DESIGNER TOOLS 
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DESIGN SOFTWARE 


► Many software’s out there to make life easier, letting you create, share, 
and test in a single solution 

► Examples: Sketch, Axure, Omnigraffle, Flinto, Principle, Adobe XD, and 
Invision are some example, but you can also use Powerpoint and Keynote. 

► Many offer free trials so you can try before you buy 



Sketch 


Adobe’ 

Creative Cloud' 




◦xure 




UX DESIGNER TOOLS 


A iKyi Hf) of 

Tools for wob 
and Ul designers 




Skalch 



Photoshop 


Dribbble 

Illustrator 

Dribbble 

Behance 

Figma 

Bchancc 

Muzli (In) 

Subform 


Meet / 

VHmI 


Craft (In) 
Invision 

Marvel 

Atomic 

Principlo 

FI into 

Framer 

Proto, io 

Axure 

AeULe XD 


2«pUn 

Keynote 


Avoood# 

Justinmind 

Github 

Inspect (In) 

Froont 

Lingo 

Frontify 

Webflow 

Abstract 

Craft (In) 

Stage (G) 

Gallery (G) 

Brand.ai 


WetS»w 
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Source: medium.com 
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A CAREER IN UX 


UX ROLES 


► UX Researcher 

► UX Designer 

► Visual (UI) Designer 

► Product Designer 


Information Architect 


Content Strategist 
Front End Developer 
Product Manager 


A CAREER IN UX 


3 (COMMON) WAYS TO BEAUX’ER 


► Freelance 

► Design Agency / Consultancy 

► In-house (in a company) 



CM Money 


(Top 100) Best Jobs in America 

January 2017 


50 Best Jobs in America pgiassdoor 

January 2017 


Top 10 hottest IT jobs for 2017 ^ www.techrepuWic.com 


January 2017 





WHO’S HIRING? AND WHERE? 


UX Jobs: Top Companies 


UX Jobs: Top U.S. Cities 
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Source: Indeed.com via "UX Design Career Options Make It a Top Choice of the Year" 


It's an exciting time in tech - From GUI to NUI 


VR, AR, AND MR: 
DESIGNING THE NEW 
REALITY EXPERIENCE 



ARTIFICIAL INTELLIGENCE 

Bots 1 01 : What you need to know 
about chatbots, Al and digital 
assistants 

OO0Q 




INTERACTION DESIGN > ARTICLES 


The Future of Voice Design 

WRITTEN BY PUBLISHED ON 

Brooke Hawkins Februa'y 14th, 2017 

Author 



Omar L. Gallaga Arnefican-Siatesfnon Staff 

( 6 omarg 


February 10th 2017 





A CAREER IN UX 
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WHY UX? 


Intersection between people, technology and business 


► Both an art and science 

► Constantly changing 

► Get to work with really smart people 

► Never a dull moment. It’s FUN! 



UX DESIGN 101 

WHERE TO GO FROM 
HERE? 



WHERE TO 00 FROM HERE ? 


NEXT STEPS 


Online resources 


General Assembly’s UXD courses 

► Part-time courses (10 wk evenings) 

► Part-time (l-wk accelerator) 

► One-day bootcamps - May 20 

► Lean Usability Testing - May 30 


UX Design Immersive (10-weeks) 


► Articles on Medium. Smashing Mae. 
Speckvbov. UXMag. UXPin blog . . . 

► Twitter follows 

► Design related topics on Flipboard 

► Dribbble. Behance 

► Udemy, Coursera, Lynda 


UX portfolio 


It’s a designer’s resume 


WHERE TO SO FROM HERE ? 86 

TWO "GETTING STARTED” ARTICLES 


Julie Zhuo 

Product design VP <p> Facebook. Lover of food, games, words. 
Find me @joulee or on juliezhuo.com 
Feb 13 • 3 min read 

The Beginning of your Design Career 

This was first published on my mailing list The Looking Glass . 
Every week , 1 answer a reader’s question. 


Fiona Yeung 

Designer • Adventurer • Traveller. | UX @>Google on the Material 
Design team | www.fionayeung.com 
Jan 12*8 min read 

FAQ: Tips and tools for getting 
started in user experience design 
(aka UX) 




WHERE TO GO FROM HERE ? 

87 

GET YOUR PORTFOLIO READY 



■ Creating Better UX Portfolios: 

4 Do’s and Dont’s 


HOW TO STRUCTURE YOUR 

UX DESIGN PORTFOLIO 




fOX Drstgn 


tkVob Dr"->r.r 




William Ng 

Product Designer Freelance | Business Econ @UCLA 
Mar 3 • 5 min read 



Zara: A Usability Case Study 


Source: William Ng 
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CLOSING THE DEAL 


Acingthe UX interview 


Pubt or March 12, 2017 


khosla ventures 


PitCeOOHY TEAM PORTFOLIO 



< BACK 


UX recruiting toolkit: Interviewing 
UX candidates (5/7) 


* 


Phillip Hunter Foil 

Heed of UX tor AtexeSk 


at Am 


HIRING 


6 91 fen 4 W « 


Note: This piece is bastxl on years of being a hiring manager... and the occasional 
candidate. It also reflects experiences shored with me by industry colleagues. At 
its core, it's bom out of the frustration-drii>en desire to see promising candidates 
stop going down in flames during the on-site UX interview because of lack of 
wisdom, preparation, and— in perhaps a good way— practice. 


tif.wang 

I like good food and convos. Past: UX Research Intern at (R’DocuSign — Present: Stud 
@CA:ollegeofarts '18 — http://www tifftiffwang.corn 
Mar 2 ■ 22 min read 


rnt at 


What I learned from flying to Seattle for Microsoft’s 
final wave of design interviews 



ACQUIRE HANDS ON EXPERIENCE 


Here Are The Hard Skills You Need To 
Succeed As A New Designer 


in 


Marry of my triends either manage or mentor teams of designers. Their main complaint 
about new cesigners? 

They’re unprepared for the real world of interaction design. 

■Piere seems to be a disconnect between whaf they d d in college versus the nuts and 
bo ts of interaction design that need to be done m companies. They don't have the skills 
for Lean UX or even for builcing wireframe after wireframe. So if you’re a new designer just 
out of college or a class like General Assembly and think you'l be the next Steve Jobs in 
two years, you need a dose of reality. 


Source: @usabilitycounts 
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projects 
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Source: @hemeon 





ACQUIRE HANDS ON EXPERIENCE 




Qumulc 

L ku Tlii a Fckjw • Jlii« 6, 2014 • 


Congratulations : m i- UX intern timed fTC UX 
Des gner, Joyce (Jlej 
LW Capstore ‘Showcase last right."® — w'tlt Jie 


Li, Aliy I lan-Smito, C iff Miller, Dariel Pircneand 
trie Wright. 


it Lice P Conrimcnt A Snare 


o 2C 


Top Comr-ants ’ 



Judy Nakamura is eric starting ms pinon* tfarcP 

Like ■ Reply '02- June 7, 2014 «t 2:21pm 



Aloe Han-Smith So proud of yci, Jie Li! V 
Congrats again! 

Like Reply 02 June t>, 20M at 3:42pm 



Jie Li thank" Albt! U 
See Ty elation 


Write a comment... Q ® 

Press Inter to post. 


Source: @Qumulo 



PATHS TO A UX CAREER 



DESIGN f FEATURED 

*14 Chia Lin - Michelin Star Pastry 
Chef turned Product Designer 

Ry Timur Mey$4er «wr January 8, $017 



Source: breakingintostartups.com 


DESIGN V FEATURED 


Meghan Schofield - UX / Ul 

Designer 

By Timur Meyster on December ll, 2016 

Meghan Schofield is an Ohio-native who has an 
impressive knack for creative problem solving. 
Prior to her current role as a UX/ Product Designer 
at infrastructure startup. CoreOS. Meghan worked 
in the field of museum exhibit... 
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PATHS TO A UX CAREER 


General Assembly 

37,133 fcl lowers 
Id 

“GA's User Experience Design Immersive fast-tracked my career switch in a way I 
never thojght Dossible. I was scared tor years to make a change, but GA helped me 
gain the confidence, skills, and network I reeded to succeed ard be happier.’ — 
LOOI graduate Isabella Encela. who made the move from marketirg manager to LX 
designer atf.abFo-warfl.a dig tal prnd irt agenry. 
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Source: linkedin 
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MENTORSHIP 


U X FOR 



94 


CHANGE 
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